<template>
  <q-page class="">
    <div style="position: relative;">
      <img style="object-fit: cover; width: 100%; height: 55vh; filter: blur(3px)" :src="background"/>
      <h3 style=" font-weight: 900; color: #ffffff; position: absolute; bottom: 100px; left: 50px;" >
        <div style="text-shadow:2px 2px 3px black;">
          Digital Management System 
        </div>
      </h3>
    </div>
    <img style="height: 10rem;  position: absolute; top: 2rem; left: 2rem;" :src="mtrlogo"/>
    <img style="width: 5rem; height: 2rem;  position: absolute; top: 2rem; right: 2rem;" :src="gnslogo"/>
    
    <div class="column items-center justify-center">
      <div class="text-dark" style="width: 40rem">
        <h5>USER LOGIN</h5>
        <div class="q-gutter-md q-pa-md">
          <div class="login-input">
            <q-input
            v-model="username"
            dense
            borderless
            standout 
            type="text"
            hide-bottom-space
            label="Username"
            labelColor="indigo-13"
            bgColor="none"
            >
            <template v-slot:prepend>
              <q-icon name="person" color="indigo-13"></q-icon>
            </template>
            </q-input>
          </div>
          <div class="login-input">
            <q-input
              v-model="password"
              hide-bottom-space
              borderless
              dense
              stack-label
              type="password"
              @keydown.enter="login()"
              label="Password"
              labelColor="indigo-13"
              
            >
            <template v-slot:prepend>
              <q-icon name="lock" color="indigo-13"></q-icon>
            </template>
            </q-input>
          </div>
          
          <div class="row items-center my-checkbox">
            <q-checkbox
            v-model="reme"
            :true-value="true"
            :false-value="false"
            class="my-checkbox"
            />
            <div>
              Remember me
            </div>
          </div>

          <div class="row">
            <q-btn
              square
              class="yellow-btn full-width"
              label="LOGIN"
              @click="login"
            />
          </div>
        </div>
      </div>
    </div>
  </q-page>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useUser } from 'src/stores/userStore';
import { useRouter } from 'vue-router';
import background from 'src/assets/gns/loginbackground.png'
import mtrlogo from 'src/assets/gns/mtrlogo.png'
import gnslogo from 'src/assets/gns/gnslogo.png'

const username = ref('');
const password = ref('');

const reme = ref(false);

const user = useUser();

const router = useRouter();

async function login() {
  const res = await user.login(username.value, password.value);
  if (res) {
    router.push({
      name: 'home',
    });
  }
}
</script>

<style scoped lang="scss">
.container {
  background-color: #f8f8f8;
}

.card {
  width: 400px;
  background-color: #fff;
  color: #000;
  border-radius: 1rem;
}

h5 {
  // background: linear-gradient(184.84deg, #5968f6 23.39%, #2c37b4 96.1%);
  color: #5e5feb;
  margin: 1rem;
  height: 5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 700;
}

.login-input{
  border: 1px solid #5e5feb;
  border-radius: 5rem;
  padding: 0 1rem ;
}

.my-checkbox{
  color: #5e5feb;

}

::v-deep(.q-checkbox__bg){
  border-radius: 10rem;
  color: #5e5feb;
}
</style>
